<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>表单</title>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css">
    <link rel="stylesheet" href="__PUBLIC__/static/css/style.css">
    <link rel="icon" href="__PUBLIC__/static/image/code.png">
    <style type="text/css">
.site-doc-color li {
    display: inline-block;
    vertical-align: middle;
    width: 180px;
    margin-left: 20px;
    margin-bottom: 20px;
    padding: 20px 10px;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    line-height: 22px;
    font-size: 14px;
}
  </style>
</head>
<body class="body">
<div class="tab-top layui-box">
  <a class="layui-btn site-demo-active layui-btn-sm" ><i class="layui-icon layui-icon-list"></i>在线人数</a>

</div>

<div class="system-table-1 layui-clear" style="padding-top:10px;">



</div>
  <div class="layui-row">


    <div class="layui-col-md3 layui-col-md-offset1">

    <ul class="site-doc-color">
       <li style="background-color: #1E9FFF;">
        <p>{$nowdaycount.u_max}</p><p>
        </p><p tips="">当前在线人数</p>
      </li>     
      <li style="background-color: #009688;">
        <p>{$daycount.u_max}</p><p>
        </p><p tips="">今天最高在线</p>
      </li>
      <li style="background-color: #5FB878;">
        <p>{$yesterdaycount.u_max}</p><p>
        </p><p tips="">昨天最高在线</p>
      </li>
      <li style="background-color: #393D49;">
        <p>{$weekaycount.u_max}</p><p>
        </p><p tips="">最近7天最高在线</p>
      </li>

    </ul>
    </div>
    <div class="layui-col-md6">
      <div id="main-line" style="height: 450px;"></div>
    </div>

<div class="search layui-col-md6 layui-col-md-offset4">
  <form class="layui-form" action="">
       <div class="layui-input-inline top-search-date">
        <input type="text" name="begnday" id="date1" autocomplete="off"  class="layui-input layui-input-sm" placeholder="" value="{$begnday}">
      </div>
  <button class="layui-btn site-demo-active layui-btn-sm search-btn" data-type="reload">查看</button>
  <input type="hidden" name="id" value="{$id}">
</form>
</div>
  </div>




<!-- 通用-970*90 -->
<script src="__PUBLIC__/layui/layui.js" charset="utf-8"></script>
<script src="__ADMIN__/js/comm.js" charset="utf-8"></script>
<script src="__PUBLIC__/echarts/echarts.js" charset="utf-8"></script>
<script type="text/javascript">
layui.use(['form', 'table', 'laydate'], function() {
    var $ = layui.jquery,
        form = layui.form,
        laydate = layui.laydate,
        table = layui.table;


    //日期时间范围
    //前后若干天可选，这里以7天为例
    laydate.render({
      elem: '#date1'
      ,value: '{$begnday}'
      ,min: -30
      ,max: 0
    });
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main-line'));

    		option = {
    			xAxis: {
    				type: 'category',
    				data: [{$hour}]
    			},
    			yAxis: {
    				type: 'value'
    			},
    			series: [{
    				data: [{$max}],
    				type: 'line'
    			}]
    		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

});
</script>



</body>
</html>